<!-- 系统日志 -->
<template>
  <div class="journal">
    <el-card class="!border-none" shadow="never">
      <el-form class="ls-form" :model="formData" inline>
        <el-form-item label="操作人">
          <el-input
            class="w-[280px]"
            placeholder="请输入"
            v-model="formData.operName"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item label="访问方式">
          <el-select
            class="w-[280px]"
            v-model="formData.requestMethod"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in visitType"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="来源IP">
          <el-input
            class="w-[280px]"
            placeholder="请输入"
            v-model="formData.operIp"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item label="访问时间">
          <daterange-picker
            v-model:startTime="formData.params.startTime"
            v-model:endTime="formData.params.endTime"
          />
        </el-form-item>

        <el-form-item label="访问链接">
          <el-input
            class="w-[280px]"
            placeholder="请输入"
            v-model="formData.operUrl"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
      <div>
        <el-table :data="pager.lists" size="large">
          <!-- <el-table-column label="记录ID" prop="operId" /> -->
          <el-table-column label="标题" prop="title" min-width="140" />
          <el-table-column prop="businessType" label="业务类型" min-width="100">
            <template #default="{ row }">
              <el-tag
                v-if="
                  row.businessType == 0 ||
                  row.businessType == 1 ||
                  row.businessType == 2
                "
                type="success"
                >其他</el-tag
              >
              <el-tag v-if="row.businessType == 3" type="danger">删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="系统名称"
            prop="applicationName"
            min-width="160"
          />
          <el-table-column
            label="方法名称"
            prop="method"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            label="请求方法"
            prop="requestMethod"
            min-width="140"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <el-tag type="success">{{
                row.requestMethod + "-" + row.operUrl
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="operatorType" label="操作系统" min-width="100">
            <template #default="{ row }">
              <el-tag v-if="row.operatorType == 0" type="success">其他</el-tag>
              <el-tag v-if="row.operatorType == 1" type="success">后台</el-tag>
              <el-tag v-if="row.operatorType == 2" type="success"
                >手机端</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column prop="status" label="执行状态" min-width="100">
            <template #default="{ row }">
              <el-tag v-if="row.status == 0" type="success">成功</el-tag>
              <el-tag v-if="row.status == 1" type="danger">失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="执行耗时(毫秒)"
            prop="costTime"
            min-width="100"
          />
          <el-table-column label="操作人" prop="operName" min-width="100" />
          <el-table-column label="操作IP" prop="operIp" min-width="100" />
          <el-table-column
            label="结果"
            prop="errorMsg"
            min-width="160"
            show-overflow-tooltip
          />

          <el-table-column label="日志时间" prop="operTime" min-width="180" />
        </el-table>
      </div>
      <div class="flex mt-4 justify-end">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="journal">
import { opelogList, cleanOpelog } from "@/api/system/operlog";
import { usePaging } from "@/layout/hooks/usePaging";

// 查询表单
const formData = ref({
  operName: "",
  operUrl: "",
  operIp: "",
  requestMethod: "",
  params: {
    startTime: "",
    endTime: ""
  }
});

// 访问方式
const visitType = ref<Array<any>>([
  {
    label: "全部",
    value: ""
  },
  {
    label: "GET",
    value: "GET"
  },
  {
    label: "POST",
    value: "POST"
  }
]);

const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: opelogList,
  params: formData.value
});

getLists();
</script>

<style lang="scss" scoped></style>
